<script setup>
import { computed, ref, onMounted } from "vue";

const isShowAnimation = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShowAnimation.value = true;
  }, 100);

  setTimeout(()=>{
    isShowAnimation.value = false;
    numeral.value = 2
  },4000)
});

// const props = defineProps(["text","animate","style"]);
const props = defineProps({
  text: {
    type: String,
    default: "hh",
  },
  animate: {
    type: String,
    default: "animate__fadeInDown",
  },
  style: String, //文本样式
  justifyContent: String, //文本对齐样式
  speed: {
    type: Number,
    default: 10,
  }, //动画速度
});

//接收动画类型
const enterActivelass = ref("animate__animated " + props.animate);
//字符串转数组
const chars = computed(() => [...props.text]);
//控制文字的速度
const numeral = ref(1);
</script>

<template>
  <div class="DynamicCharacters">
    <div
      class="main"
      v-for="(item, index) in chars"
      :key="item"
      :style="`--animate-duration: ${(numeral + index / props.speed)}s`"
    >
      <Transition
        :enter-active-class="enterActivelass"
        leave-active-class="animate__animated animate__bounceOutLeft"
      >
        <div class="text" v-if="isShowAnimation" :style="props.style">
          {{ item }}
        </div>
      </Transition>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.DynamicCharacters {

  // width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  // & > :nth-child(n + 3) {
  //   margin-left: 2px;

  // }
  .main {
    display: inline-block; // 确保正确换行
    .text {
      font-size: 20px;
    }
  }
}
</style>
